<!-- common_order_on_site现场下单 -->
<template>
	<view class="page-container">
		<!-- 服务列表容器 -->
		<view class="service-panel">
			<!-- 服务项列表 -->
			<serviceItems :serviceList="serviceList" />
		</view>
	</view>
	<!-- <SimpleTabBar /> -->
	<TabComponent :tabs="currentTabs" @change="onTabChange" />
</template>

<script setup>
import serviceItems from "@/components/serviceItems/index.vue"
import {
	ref,
	getCurrentInstance,
	onMounted,
	computed,
	watch,
	nextTick
} from 'vue';
import {
	useRouter
} from 'uni-mini-router'

import {
	useFontSizeStore
} from '@/stores/fontSizeStore';
import {
	useTabStore
} from '@/stores/tabs'
import {
	ROLE_TABS
} from "@/config/roles"
import TabComponent from '@/components/tab-bar/index.vue'
const fontSizeStore = useFontSizeStore();
const tabStore = useTabStore()
const router = useRouter();
const userRoleName = ref("");

// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
	const role = tabStore.getUserRole
	return ROLE_TABS[role]?.tabs || ROLE_TABS['default']?.tabs || []
})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
	nextTick(() => {
		router.pushTab({
			name: tab.key
		})
	})
}
// import SimpleTabBar from '@/components/custom-tab-bar/index.vue'
// 服务列表数据
const serviceList = [{
	title: '一日三餐',
	desc: '社区食堂菜单、上门、送餐服务', // 优化：info → desc（更准确表示描述）
	icon: 'icon-a-066_chifan',
	pageName: "common_pointsSupermarket",
	name: "yiri_cansan"
},
{
	title: '生活服务',
	desc: '家政服务、商超购物、护理服务',
	icon: 'icon-shenghuofuwu ',
	pageName: "common_pointsSupermarket",
	name: "shenghuo_lei"
},
{
	title: '医疗健康',
	desc: '健康监测、用药提醒、医疗陪护',
	icon: 'icon-yiliaofuwu',
	pageName: "common_pointsSupermarket",
	name: "yaodian_chaoshi"
}
]


</script>

<style scoped lang="less">
@import '@/static/styles/colors.less';
@import '@/static/styles/constants.less';

// 页面容器
.page-container {
	padding: 30rpx;
	height: 100vh;
	background-color: @primary-ivory;
}

// 服务面板容器
.service-panel {
	background-color: #fff;
	border-radius: 30rpx;
	padding: 30rpx;
}

// 面板标题
.panel-title {
	font-size: @h3-size;
	font-weight: 600;
	color: #333;
	margin-bottom: 30rpx;
}

// 服务项
.service-item {
	margin-bottom: 30rpx;

	&:last-child {
		margin-bottom: 0; // 最后一项移除底部间距
	}

	&__inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		align-items: center;
	}
}

// 服务图标
.service-icon {
	width: 80rpx; // 统一使用rpx单位
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #e6f7ff;
	border-radius: 50%;
	margin-right: 24rpx;

	.iconfont {
		font-size: @icon-size-lg;
		color: #007AFF;
	}
}

// 服务内容区域
.service-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-bottom: 1px solid @color-border;
	padding-bottom: 20rpx; // 适当增大底部内边距

	// 服务项头部（标题+按钮）
	.service-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	// 服务标题
	.service-title {
		font-size: @h4-size; // 统一使用rpx单位
		font-weight: 500;
		color: #333;
	}

	// 服务描述
	.service-desc {
		font-size: @h5-size;
		color: #666;
		line-height: 1.4; // 增加行高提升可读性
	}
}
</style>